  <template>
	<view>
		<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">用户注册</block>
		</cu-custom>
	<view class="zai-box">
	
        <scroll-view scroll-y class="page">
            <!-- <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]"> -->
				<!-- <image src="http://www.baofenrenmai.vip/static/upload/202307131689256550084.png" mode='aspectFit' class="zai-logo "></image> -->
				<!-- <view class="zai-title text-shadow ">爆粉人脉</view> -->
			<!-- </view> -->
            <view class="box padding-lr-xl " :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block v-if="loginWay==1">
					<view class="cu-form-group  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text></view>
						<input disabled="true" v-if="disabled2" placeholder="请输入推荐人手机号" name="input" v-model="userInfo.parentName"></input> 
						<input   v-if="!disabled2" placeholder="请输入推荐人手机号" name="input" v-model="userInfo.yqPhone"></input> 
					</view>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text></view>
						<input placeholder="请输入注册手机号" name="input" v-model="userInfo.phone"></input>
					</view> 
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-news margin-right-xs"></text></view>
						<input placeholder="请输入昵称" name="input" v-model="userInfo.realname"></input>
					</view>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-pay margin-right-xs"></text></view>
						<input placeholder="请输入微信/支付宝号" name="input" v-model="userInfo.wz"></input>
					</view>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-mail margin-right-xs"></text></view>
						<input placeholder="请输入邮箱" name="input" v-model="userInfo.email"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text></view>
						<input class="uni-input" placeholder="请输入登录密码" :password="!showPassword" v-model="userInfo.password" />
						<view class="action text-lg">
						    <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
						</view>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text></view>
						<input class="uni-input" placeholder="请输入确认密码" :password="!showPassword2" v-model="userInfo.password2" />
						<view class="action text-lg">
						    <text :class="[showPassword2 ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword2"></text>
						</view>
					</view>
					<view class="padding text-center margin-top">
						<button class="bg-red lg " :loading="loading" :class="[shape=='round'?'round':'']"   
							@tap="register"><text space="emsp">{{loading ? "账户注册中...":" 账户注册 "}}</text>
						</button> 
						<text class="register-text" @tap="onRegister" style="float: left;">已有账户,立即登录</text>
						<!-- <text class="forgot-password-text" @tap="onForgotPassword" style="float: right;">忘记密码</text> -->
					</view> 
				</block>
				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view>
				<!-- #endif -->
				
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">登录中...</view>
		</view>
    </view>

	</view>
</template>

<script>
	import api from "@/api/api" 
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
    import configService from '@/common/service/config.service.js';
	
    export default {
		props: ['id'], // 接收id参数
        data() {
            return {
				userInfo:{
					parentName:'',
					yqPhone:'',
					phone:'',
					username:'',
					realname:'',
					parentId:'',
					phone2:'',
					wz:'',
					password:'',
					password2:'',
					email:'',
					
					
				},
				disabled2:false,
				isDisabled:false,
				shape:'',//round 圆形
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				showPassword2: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:'',
				//第三方登录相关信息
				thirdType:"",
				thirdLoginInfo:"",
				thirdLoginState:false,
				bindingPhoneModal:false,
				thirdUserUuid:'',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				}
            };
        },
		mounted() {
			const id = this.$route.query.id;
			if(id!=undefined && id!=null && id !=''){
				this.getPhone(id)
			}
		},
		onLoad:function(){
			// #ifdef APP-PLUS
			var that=this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
				that.version=wgtinfo.version
			});
			// #endif
		},
		computed: {
		
		      isSendSMSEnable() {
		        return this.smsCountDown <= 0 && this.phoneNo.length > 4;
		      },
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      },
		      canSMSLogin() {
		        return this.userName.length > 4 && this.smsCode.length > 4;
		      },
		      canPwdLogin() {
		        return this.userName.length > 4 && this.password.length > 4;
		      },
		},
        methods: {
			getPhone(uid){ 
							  api.getPhone(uid).then(response => {
							      if(response.data.code ==200){   
									  this.userInfo.phone2 = response.data.result.phone 
									   this.userInfo.parentName = response.data.result.name 
									  this.userInfo.yqPhone = response.data.result.phone 
									  this.disabled2 = true
							      }else{ 
									let msg = response.data.message || "请求超时"
									this.$tip.alert(msg); 
									
									this.isDisabled = true 
							      }
					  }).catch(error => { 
				 		this.$tip.alert("请求超时");
						
						this.isDisabled = true 
					})
			},
			 ...mapActions([ "mLogin","PhoneLogin","ThirdLogin" ]),
			register: function (){
				// 正则表达式匹配手机号的规则
				const phoneRegex = /^1[3456789]\d{9}$/;
				
			        if(!this.userInfo.yqPhone || this.userInfo.yqPhone.length==0){
			          this.$tip.toast('请填写推荐人手机号');
			          return;
			        }
					if (!phoneRegex.test(this.userInfo.yqPhone)) {
					  this.$tip.toast('请填写有效的推荐人手机号');
					  return;
					}
					if(!this.userInfo.phone || this.userInfo.phone.length==0){
					  this.$tip.toast('请填写手机号');
					  return;
					}
					if (!phoneRegex.test(this.userInfo.phone)) {
					  this.$tip.toast('请填写有效的手机号');
					  return;
					}
					if(this.userInfo.phone == this.userInfo.yqPhone ){
					   this.$tip.toast('推荐人不能是自己');
					  return;
					}
					const emailRegex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
						if(!this.userInfo.email || this.userInfo.email.length==0){
					   this.$tip.toast('请填写邮箱');
					  return;
					}
					if (!emailRegex.test(this.userInfo.email)) {
					  this.$tip.toast('请填写有效邮箱');
					  return;
					}
			        if(!this.userInfo.realname || this.userInfo.realname.length==0){
			           this.$tip.toast('请填写昵称');
			          return;
			        }
					if(!this.userInfo.wz || this.userInfo.wz.length==0){
					   this.$tip.toast('请填写微信/支付宝号');
					  return;
					}
					if(!this.userInfo.password || this.userInfo.password.length==0){
					   this.$tip.toast('请填写密码');
					  return;
					} 
					if(this.userInfo.password.length<8){
					  this.$tip.toast('请输入八位数以上的密码');
					  return;
					} 
					if(!this.userInfo.password2 || this.userInfo.password2.length==0){
					   this.$tip.toast('请填写确认密码');
					  return;
					}
					if(this.userInfo.password != this.userInfo.password2 ){
					   this.$tip.toast('两个密码不一致');
					  return;
					}
			        let loginParams = {
			          username:this.userName,
			          password:this.password
			        }
					this.loading=true;
			        api.register(JSON.stringify(this.userInfo)).then((res) => {
					  this.loading=false;
			          if(res.data.success){
						 // #ifdef APP-PLUS
						  this.saveClientId()
						 // #endif
						 // #ifndef APP-PLUS
						  this.$tip.success('注册成功!')
						  this.$Router.replaceAll({name:'login'})
						 // #endif
						}else{
			              this.$tip.alert(res.data.message);
			            }
			        }).catch((err) => {
			          let msg = err.data.message || "请求超时"
			          this.loading=false;
					  this.$tip.alert(msg);
			        }).finally(()=>{
					  this.loading=false;
				})
			},
			saveClientId(){
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId",{params:{clientId:cid}}).then(res=>{
					console.log("res::saveClientId>",res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'index'})
				})
			},
			onRegister(){
				this.$Router.replace({name:'login'})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			changePassword2() {
				this.showPassword2 = !this.showPassword2;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile=this.phoneNo;
				smsParams.smsmode="0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
                if(!smsParams.mobile || smsParams.mobile.length==0){
					this.$tip.toast('请输入手机号');
					return false
				}
				if(!checkPhone.test(smsParams.mobile)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms",smsParams).then(res=>{
				  if(res.data.success){
					this.smsCountDown = 60;
					this.startSMSTimer();
				  }else{
					this.smsCountDown = 0;
					this.$tip.toast(res.data.message);
				  }
				});
			  },
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
				  this.smsCountDown--;
				  if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				  }
				}, 1000);
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				
				if(!this.phoneNo || this.phoneNo.length==0){
				  this.$tip.toast('请填写手机号');
				  return;
				}
				if(!checkPhone.test(this.phoneNo)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if(!this.smsCode || this.smsCode.length==0){
				  this.$tip.toast('请填短信验证码');
				  return;
				}
				let loginParams = {
				  mobile:this.phoneNo,
				  captcha:this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
				  console.log("res====》",res)
				  if(res.data.success){
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'index'})
				  }else{
					this.$tip.error(res.data.message);
				  }
				}).catch((err) => {
				  let msg = ((err.response || {}).data || {}).message || err.data.message || "请求超时"
				  this.$tip.error(msg);
				});
			},
			loginSuccess() {
			  // 登陆成功，重定向到主页
			  this.$Router.replace({name:'index'})
			},
			requestFailed(err) {
			  this.$message.warning("登录失败")
			},
        },
		beforeDestroy() {
		    if (this.smsCountInterval) {
		        clearInterval(this.smsCountInterval);
		    }
		},
    }
</script>

<style>
    .login-paddingtop {
        padding-top: 100upx;
    }

    .zai-box {
        padding: 0 20upx;
        padding-top: 100upx;
        position: relative;
    }
    .login-text {

        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .register-text {
        font-size: 14px;
        color: #666;
        margin-right: 10px;
		margin-top: 10px;
        cursor: pointer;
    }

    .forgot-password-text {
        font-size: 14px;
        color: #666;
        cursor: pointer;
			margin-top: 10px;
    }
    .zai-logo {
        width: 200upx;
        height: 150px;
    }

    .zai-title {
       font-size: 58upx;
       color: #000000;
       text-align: center;
    }

    .input-placeholder, .zai-input {
        color: #94afce;
    }

    .zai-label {
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1upx, 1upx);
    }

</style>
